<template>
  <div class="system-bg">
    <el-card class="user-card" shadow="hover">
      <div slot="header" class="card-header-vertical">
        <div class="header-title">成员详情</div>
      </div>
      
      <div v-if="member" class="member-detail">
        <!-- 基本信息 -->
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="avatar-section">
              <img v-if="member.photo" :src="getImageUrl(member.photo)" class="member-avatar" />
              <div v-else class="member-avatar-placeholder">
                <i class="el-icon-user"></i>
              </div>
              <h2 class="member-name">{{ member.name }}</h2>
              <el-tag :type="member.status === 1 ? 'success' : 'info'" size="medium">
                {{ member.status === 1 ? '在世' : '已故' }}
              </el-tag>
            </div>
          </el-col>
          <el-col :span="16">
            <el-descriptions title="基本信息" :column="2" border>
              <el-descriptions-item label="姓名">{{ member.name }}</el-descriptions-item>
              <el-descriptions-item label="性别">{{ member.gender === 'M' ? '男' : (member.gender === 'F' ? '女' : '-') }}</el-descriptions-item>
              <el-descriptions-item label="世代">{{ member.generation || '-' }}</el-descriptions-item>
              <el-descriptions-item label="排序号">{{ member.sortOrder || '-' }}</el-descriptions-item>
              <el-descriptions-item label="出生日期">{{ member.birthDate || '-' }}</el-descriptions-item>
              <el-descriptions-item label="去世日期">{{ member.deathDate || '-' }}</el-descriptions-item>
              <el-descriptions-item label="联系方式">{{ member.contact || '-' }}</el-descriptions-item>
              <el-descriptions-item label="籍贯">{{ getNativePlace(member) }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 家族信息 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <el-descriptions title="家族信息" :column="2" border>
              <el-descriptions-item label="所属家族">{{ member.clanName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="所属分支">{{ member.branchName || '-' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 关系信息 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <el-descriptions title="关系信息" :column="3" border>
              <el-descriptions-item label="父亲">{{ member.fatherName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="母亲">{{ member.motherName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="配偶">{{ member.spouseName || '-' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 照片和OCR内容 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="12">
            <div class="photo-section">
              <h3>照片</h3>
              <div v-if="member.photo" class="photo-container">
                <img :src="getImageUrl(member.photo)" class="member-photo" @click="previewPhoto" />
              </div>
              <div v-else class="no-photo">
                <i class="el-icon-picture"></i>
                <p>暂无照片</p>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="ocr-section">
              <h3>OCR识别内容</h3>
              <div class="ocr-content">
                <p v-if="member.ocrContent">{{ member.ocrContent }}</p>
                <p v-else class="no-content">暂无OCR内容</p>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 个人事迹 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <div class="story-section">
              <h3>个人事迹</h3>
              <div class="story-content">
                <p v-if="member.story">{{ member.story }}</p>
                <p v-else class="no-content">暂无个人事迹</p>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 地址信息 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <el-descriptions title="地址信息" :column="1" border>
              <el-descriptions-item label="现住地址">{{ member.currentAddress || '-' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>

        <!-- 子女信息 -->
        <el-card style="margin-top: 20px;">
          <div slot="header">
            <span>子女信息</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click="showChildrenDialog = true">
              调整子女排序
            </el-button>
          </div>
          <div v-if="children.length === 0" class="empty-text">暂无子女信息</div>
          <el-table v-else :data="children" style="width: 100%">
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="gender" label="性别">
              <template slot-scope="scope">
                {{ scope.row.gender === 'M' ? '男' : '女' }}
              </template>
            </el-table-column>
            <el-table-column prop="childOrder" label="排序"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="viewChildDetail(scope.row)" v-if="scope.row && scope.row.id">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>

        <!-- 配偶信息 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <el-card>
              <div slot="header" class="clearfix">
                <span>配偶信息</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="showSpouseSelector">
                  <i class="el-icon-plus"></i> 管理配偶
                </el-button>
              </div>
              
              <div v-if="spouses.length === 0" class="empty-text">暂无配偶信息</div>
              <el-table v-else :data="spouses" border style="width: 100%">
                <el-table-column prop="spouseName" label="配偶姓名">
                  <template slot-scope="scope">
                    {{ scope.row.spouseName || `配偶${scope.row.spouseId}` }}
                  </template>
                </el-table-column>
                <el-table-column prop="spouseGender" label="性别">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.spouseGender === 'M' ? 'primary' : 'danger'">
                      {{ scope.row.spouseGender === 'M' ? '男' : '女' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="spouseBirthDate" label="出生日期"></el-table-column>
                <el-table-column prop="spouseStatus" label="状态">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.spouseStatus === '在世' ? 'success' : 'info'">
                      {{ scope.row.spouseStatus }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="spouseContact" label="联系方式"></el-table-column>
                <el-table-column label="关系类型">
                  <template slot-scope="scope">
                    <el-tag :type="scope.row.relationType === 'spouse' ? 'primary' : 'warning'">
                      {{ scope.row.relationType === 'spouse' ? '配偶' : '妾' }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="sortOrder" label="排序"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="removeSpouse(scope.row)">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>

        <!-- 时间信息 -->
        <el-row :gutter="24" style="margin-top: 24px;">
          <el-col :span="24">
            <el-descriptions title="时间信息" :column="2" border>
              <el-descriptions-item label="创建时间">{{ member.createdAt || '-' }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ member.updatedAt || '-' }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>

      <div v-else class="loading-section">
        <el-empty description="加载中..."></el-empty>
      </div>

      <div class="detail-footer">
        <el-button class="outline-btn" @click="$router.back()">返回</el-button>
      </div>
    </el-card>

    <!-- 配偶信息对话框 -->
    <el-dialog 
      :title="isEditSpouse ? '编辑配偶' : '添加配偶'" 
      :visible.sync="spouseDialogVisible" 
      width="500px">
      <el-form :model="currentSpouse" label-width="100px">
        <el-form-item label="配偶成员">
          <el-select v-model="currentSpouse.spouseId" placeholder="请选择配偶成员" style="width: 100%">
            <el-option
              v-for="memberItem in allMembers"
              :key="memberItem.id"
              :label="memberItem.name"
              :value="memberItem.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关系类型">
          <el-select v-model="currentSpouse.relationType" placeholder="请选择关系类型" style="width: 100%">
            <el-option label="配偶" value="spouse"></el-option>
            <el-option label="妾" value="concubine"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="currentSpouse.sortOrder" :min="1" style="width: 100%"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="spouseDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveSpouse">确定</el-button>
      </div>
    </el-dialog>

    <!-- 照片预览对话框 -->
    <el-dialog :visible.sync="photoPreviewVisible" title="照片预览" width="600px">
      <div class="photo-preview">
        <img v-if="member && member.photo" :src="getImageUrl(member.photo)" style="width: 100%; height: auto;" />
      </div>
    </el-dialog>

    <!-- 子女排序对话框 -->
    <el-dialog :visible.sync="showChildrenDialog" title="调整子女排序" width="700px" class="children-order-dialog">
      <div class="children-reorder">
        <p class="reorder-tip">拖拽调整子女顺序，第一个为长子/长女</p>
        <el-table :data="childrenForReorder" style="width: 100%" size="small" class="children-order-table">
          <el-table-column label="排序" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getChildOrderType(scope.$index + 1)" size="small" class="order-tag">
                {{ getChildOrderText(scope.$index + 1, scope.row.gender) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120" />
          <el-table-column prop="gender" label="性别" width="80" align="center">
            <template slot-scope="scope">
              <span class="gender-text">{{ scope.row.gender === 'M' ? '男' : (scope.row.gender === 'F' ? '女' : '-') }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="birthDate" label="出生日期" width="120" />
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <div class="order-actions">
                <el-button size="mini" type="text" class="move-btn" @click="moveChild(scope.$index, 'up')" :disabled="scope.$index === 0">
                  上移
                </el-button>
                <el-button size="mini" type="text" class="move-btn" @click="moveChild(scope.$index, 'down')" :disabled="scope.$index === childrenForReorder.length - 1">
                  下移
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showChildrenDialog = false" class="cancel-btn">取消</el-button>
        <el-button type="primary" @click="saveChildrenOrder" class="save-btn">保存排序</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMemberDetail, getMemberChildren, reorderChildren, getMemberList } from '@/api/member';
import { getMemberSpouses, addMemberSpouse, updateMemberSpouse, deleteMemberSpouse } from '@/api/member'
import SpouseSelector from '@/components/SpouseSelector.vue'

export default {
  name: 'MemberDetail',
  components: {
    SpouseSelector
  },
  data() {
    return {
      member: {},
      children: [],
      spouses: [], // 新增：配偶信息
      loading: false,
      spouseDialogVisible: false, // 新增：配偶对话框
      currentSpouse: {}, // 新增：当前编辑的配偶
      isEditSpouse: false, // 新增：是否编辑配偶
      allMembers: [], // 新增：所有成员列表（用于选择配偶）
      showChildrenDialog: false,
      childrenForReorder: [], // 用于调整排序的子女列表
      photoPreviewVisible: false, // 新增：照片预览对话框
    };
  },
  
  async mounted() {
    await this.loadMemberDetail();
    await this.loadChildren();
    await this.loadSpouses(); // 新增：加载配偶信息
    await this.loadAllMembers(); // 新增：加载所有成员
  },
  
  // 监听路由参数变化
  watch: {
    '$route'(to, from) {
      // 如果路由参数发生变化，重新加载数据
      if (to.params.id !== from.params.id) {
        console.log('路由参数变化，重新加载数据:', to.params.id);
        this.loadMemberDetail();
        this.loadChildren();
        this.loadSpouses();
      }
    }
  },
  methods: {
    async loadMemberDetail() {
      try {
        const memberId = this.$route.params.id;
        const data = await getMemberDetail(memberId);
        this.member = data;
        
        // 加载子女信息
        await this.loadChildren();
      } catch (error) {
        this.$message.error('加载成员详情失败');
        console.error(error);
      }
    },
    
    async loadChildren() {
      try {
        const memberId = this.$route.params.id;
        console.log('加载子女信息，成员ID:', memberId);
        const childrenData = await getMemberChildren(memberId);
        console.log('子女API响应:', childrenData);
        this.children = childrenData || [];
        this.childrenForReorder = [...this.children]; // 初始化子女列表
        console.log('处理后的子女列表:', this.children);
      } catch (error) {
        console.error('加载子女信息失败:', error);
        this.children = [];
        this.childrenForReorder = [];
      }
    },

    previewPhoto() {
      this.photoPreviewVisible = true;
    },
    getImageUrl(photoPath) {
      if (!photoPath) return '';
      if (photoPath.startsWith('http')) {
        return photoPath;
      }
      return photoPath; // Use relative path since proxy handles it
    },
    getNativePlace(member) {
      const parts = [];
      if (member.nativeProvinceName) parts.push(member.nativeProvinceName);
      if (member.nativeCityName) parts.push(member.nativeCityName);
      if (member.nativeCountyName) parts.push(member.nativeCountyName);
      if (member.nativeTownName) parts.push(member.nativeTownName);
      return parts.length > 0 ? parts.join(' ') : '-';
    },
    getChildOrderType(order) {
      if (order === 1) return 'success'; // 长子/长女
      if (order === 2) return 'info'; // 次子/次女
      if (order === 3) return 'warning'; // 三子/三女
      return 'info'; // 其他
    },
    getChildOrderText(order, gender) {
      if (order === 1) return gender === 'M' ? '长子' : '长女';
      if (order === 2) return gender === 'M' ? '次子' : '次女';
      if (order === 3) return gender === 'M' ? '三子' : '三女';
      return `第${order}子`;
    },
    viewChildDetail(child) {
      console.log('点击查看子女详情:', child);
      if (!child || !child.id) {
        this.$message.error('子女信息无效');
        return;
      }
      console.log('跳转到子女详情页面:', `/member/detail/${child.id}`);
      
      // 使用replace而不是push，避免浏览器历史堆栈问题
      this.$router.replace(`/member/detail/${child.id}`).then(() => {
        console.log('路由跳转成功');
        // 强制刷新页面数据
        this.$nextTick(() => {
          this.forceRefreshData();
        });
      }).catch(err => {
        console.error('路由跳转失败:', err);
      });
    },
    moveChild(index, direction) {
      if (!this.childrenForReorder || !this.childrenForReorder[index]) {
        return;
      }
      
      const currentChild = this.childrenForReorder[index];
      const targetIndex = direction === 'up' ? index - 1 : index + 1;

      if (targetIndex < 0 || targetIndex >= this.childrenForReorder.length) {
        return;
      }

      const targetChild = this.childrenForReorder[targetIndex];
      if (!targetChild) {
        return;
      }

      // 交换两个子女的顺序
      [this.childrenForReorder[index], this.childrenForReorder[targetIndex]] = [this.childrenForReorder[targetIndex], this.childrenForReorder[index]];

      // 更新子女的排序号
      this.childrenForReorder.forEach((child, i) => {
        if (child) {
          child.childOrder = i + 1;
        }
      });
      // 修复：强制触发响应式刷新
      this.childrenForReorder = [...this.childrenForReorder];
    },
    async saveChildrenOrder() {
      try {
        const memberId = this.$route.params.id;
        if (!memberId) {
          this.$message.error('成员ID无效');
          return;
        }
        
        const childIds = this.childrenForReorder
          .filter(child => child && child.id)
          .map(child => child.id);
          
        await reorderChildren(memberId, childIds);
        this.$message.success('子女排序已保存');
        this.showChildrenDialog = false;
        await this.loadChildren(); // 重新加载子女信息以更新排序
      } catch (error) {
        this.$message.error('保存子女排序失败');
        console.error(error);
      }
    },

    // 新增：加载配偶信息
    async loadSpouses() {
      if (!this.member || !this.member.id) return;
      
      try {
        const response = await getMemberSpouses(this.member.id);
        console.log('配偶信息API响应:', response);
        
        if (response && response.code === 0) {
          // API返回成功，数据在response中
          this.spouses = response.data || [];
        } else if (response && Array.isArray(response)) {
          // 兼容直接返回数组的情况
          this.spouses = response;
        } else {
          this.spouses = [];
        }
        
        console.log('处理后的配偶信息:', this.spouses);
      } catch (error) {
        console.error('加载配偶信息失败:', error);
        this.$message.error('加载配偶信息失败');
        this.spouses = [];
      }
    },
    
    // 新增：添加配偶
    addSpouse() {
      if (!this.member || !this.member.id) {
        this.$message.error('成员信息未加载，请刷新页面重试');
        return;
      }
      
      this.currentSpouse = {
        memberId: this.member.id,
        spouseId: null,
        relationType: 'spouse',
        sortOrder: this.spouses.length + 1
      }
      this.isEditSpouse = false
      this.spouseDialogVisible = true
    },
    
    // 新增：编辑配偶
    editSpouse(spouse) {
      if (!spouse || !spouse.id) {
        this.$message.error('配偶信息无效');
        return;
      }
      
      this.currentSpouse = { ...spouse }
      this.isEditSpouse = true
      this.spouseDialogVisible = true
    },
    
    // 新增：删除配偶
    async deleteSpouse(spouseId) {
      if (!spouseId) {
        this.$message.error('配偶ID无效');
        return;
      }
      
      try {
        await this.$confirm('确定要删除这个配偶信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        
        await deleteMemberSpouse(spouseId)
        this.$message.success('删除成功')
        await this.loadSpouses()
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败')
          console.error(error)
        }
      }
    },
    
    // 新增：保存配偶信息
    async saveSpouse() {
      try {
        if (!this.currentSpouse || !this.currentSpouse.memberId) {
          this.$message.error('配偶信息不完整');
          return;
        }
        
        if (this.isEditSpouse) {
          if (!this.currentSpouse.id) {
            this.$message.error('编辑配偶时ID不能为空');
            return;
          }
          await updateMemberSpouse(this.currentSpouse.id, this.currentSpouse)
        } else {
          await addMemberSpouse(this.currentSpouse)
        }
        
        this.$message.success('保存成功')
        this.spouseDialogVisible = false
        await this.loadSpouses()
      } catch (error) {
        this.$message.error('保存失败')
        console.error(error)
      }
    },

    // 新增：加载所有成员（用于选择配偶）
    async loadAllMembers() {
      try {
        const res = await getMemberList()
        
        // 处理不同的响应格式
        let members = [];
        if (Array.isArray(res)) {
          // 如果直接返回数组
          members = res;
        } else if (res && Array.isArray(res.data)) {
          // 如果返回 {data: [...]} 格式
          members = res.data;
        } else if (res && Array.isArray(res.list)) {
          // 如果返回 {list: [...]} 格式
          members = res.list;
        } else if (res && Array.isArray(res.records)) {
          // 如果返回 {records: [...]} 格式
          members = res.records;
        } else {
          // 其他情况，尝试查找任何数组属性
          for (const key in res) {
            if (Array.isArray(res[key])) {
              members = res[key];
              break;
            }
          }
        }
        
        this.allMembers = members || [];
      } catch (error) {
        this.$message.error('加载成员列表失败')
        this.allMembers = []
      }
    },

    // 新增：显示配偶选择器
    showSpouseSelector() {
      if (!this.member || !this.member.id) {
        this.$message.error('成员信息未加载，请刷新页面重试');
        return;
      }
      this.$router.push({
        name: 'MemberSpouseSelector',
        params: { memberId: this.member.id }
      });
    },

    // 新增：查看配偶详情
    viewSpouseDetail(spouse) {
      if (!spouse || !spouse.id) {
        this.$message.error('配偶信息无效');
        return;
      }
      this.$router.push(`/member/detail/${spouse.id}`);
    },

    // 新增：移除配偶
    async removeSpouse(spouse) {
      if (!spouse || !spouse.id) {
        this.$message.error('配偶信息无效');
        return;
      }

      try {
        await this.$confirm(`确定要移除配偶 "${spouse.spouseName || `配偶${spouse.spouseId}`}" 吗？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        await deleteMemberSpouse(spouse.id);
        this.$message.success('配偶已移除');
        await this.loadSpouses();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('移除配偶失败');
          console.error(error);
        }
      }
    },
    // 强制刷新页面数据
    async forceRefreshData() {
      console.log('强制刷新页面数据');
      try {
        await this.loadMemberDetail();
        await this.loadChildren();
        await this.loadSpouses();
        console.log('数据刷新完成');
      } catch (error) {
        console.error('数据刷新失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.system-bg {
  min-height: 80vh;
  background: linear-gradient(135deg, #f4f6fa 60%, #e0e7ff 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 0;
  animation: fadeIn 0.8s;
}

.user-card {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-header-vertical {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.header-btn-group {
  display: flex;
  gap: 8px;
}

.outline-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 8px 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.outline-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.member-detail {
  padding: 24px 0;
}

.avatar-section {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 12px;
  margin-bottom: 24px;
}

.member-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.member-avatar-placeholder {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: white;
  font-size: 48px;
}

.member-name {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 12px 0;
}

.photo-section, .ocr-section, .story-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  height: 100%;
}

.photo-section h3, .ocr-section h3, .story-section h3 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-weight: 600;
}

.photo-container {
  text-align: center;
}

.member-photo {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.member-photo:hover {
  transform: scale(1.05);
}

.no-photo, .no-content {
  text-align: center;
  color: #6c757d;
  padding: 40px 0;
}

.no-photo i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.ocr-content, .story-content {
  background: white;
  padding: 16px;
  border-radius: 6px;
  min-height: 120px;
  line-height: 1.6;
}

.loading-section {
  padding: 60px 0;
  text-align: center;
}

.photo-preview {
  text-align: center;
}

.outline-btn {
  background: #fff;
  border: 1px solid #6a82fb;
  color: #6a82fb;
  margin-left: 8px;
  transition: all 0.2s;
}
.outline-btn:hover {
  background: #6a82fb;
  color: #fff;
}
.detail-footer {
  margin-top: 32px;
  text-align: center;
}

.children-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 24px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-header h3 {
  margin: 0;
  color: #2c3e50;
  font-weight: 600;
}

.children-list {
  background: white;
  border-radius: 6px;
  overflow-x: auto;
  max-height: 300px;
}

.children-list .el-table {
  width: 100%;
}

.children-list .el-table th {
  background-color: #f5f7fa;
  color: #303133;
  font-weight: 600;
}

.children-list .el-table td {
  padding: 8px 12px;
}

.children-list .el-table .el-tag {
  margin-right: 8px;
}

.children-list .el-table .el-button {
  padding: 0 8px;
}

.no-children {
  padding: 40px 0;
  text-align: center;
}

/* 子女排序对话框样式 */
.children-order-dialog ::v-deep .el-dialog {
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.children-order-dialog ::v-deep .el-dialog__header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.children-order-dialog ::v-deep .el-dialog__title {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

.children-order-dialog ::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: white;
  font-size: 18px;
}

.children-order-dialog ::v-deep .el-dialog__body {
  padding: 24px;
}

.children-order-dialog ::v-deep .el-dialog__footer {
  padding: 16px 24px 24px;
  border-top: 1px solid #f0f0f0;
}

.children-reorder {
  background: #fafbfc;
  border-radius: 8px;
  padding: 20px;
}

.reorder-tip {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
  text-align: center;
  padding: 12px;
  background: #e8f4fd;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.children-order-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.children-order-table ::v-deep .el-table__header-wrapper {
  background: #f8f9fa;
}

.children-order-table ::v-deep .el-table th {
  background: #f8f9fa !important;
  color: #303133;
  font-weight: 600;
  border-bottom: 2px solid #e4e7ed;
  padding: 12px 0;
}

.children-order-table ::v-deep .el-table td {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.children-order-table ::v-deep .el-table__row:hover {
  background: #f5f7fa !important;
}

.order-tag {
  border-radius: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.order-tag.el-tag--success {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  color: white;
}

.order-tag.el-tag--info {
  background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);
  color: white;
  border: 1px solid #dcdfe6;
}

.order-tag.el-tag--warning {
  background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%);
  color: white;
}

.gender-text {
  font-weight: 500;
  color: #606266;
}

.order-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.move-btn {
  color: #409eff;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s;
}

.move-btn:hover:not(:disabled) {
  background: #ecf5ff;
  color: #409eff;
}

.move-btn:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.cancel-btn {
  border: 1px solid #dcdfe6;
  color: #606266;
  background: white;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.2s;
}

.cancel-btn:hover {
  border-color: #c0c4cc;
  color: #303133;
}

.save-btn {
  background: linear-gradient(135deg, #409eff 0%, #67c23a 100%);
  border: none;
  color: white;
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 500;
  transition: all 0.2s;
}

.save-btn:hover {
  background: linear-gradient(135deg, #337ecc 0%, #5daf34 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.dialog-footer {
  text-align: right;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
</style> 